<template>
  <div class="self_adaption">
    <!-- /////////////////////////////////////////////////////////////////        表格列表        ////////////////////////////////////////////////////////// -->
    <div class="table">
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%"
        :show-overflow-tooltip="true">
        <el-table-column prop="startAt" label="更新日期" width="250" align="center">
          <template #header>
            <div class="custom-header">
              更新日期
              <el-tooltip
                class="box-item"
                effect="dark"
                content="每天调价一次，需要更新的估价最迟需在前一天下午5:00前提交到系统进行审核，审核通过后，统一在选择日期零点更新。"
                placement="bottom">
                <el-icon><Warning /></el-icon>
              </el-tooltip>
            </div>
          </template>
          <template #default="item">
            <span v-show="!show">{{ item.row.startAt }}</span>
            <div v-show="show">
              <div class="demo-date-picker">
                <div class="block">
                  <el-date-picker
                    v-model="time"
                    type="date"
                    placeholder="请选择更新日期"
                    :size="size"
                    :disabled="!show" />
                </div>
              </div>
              <div style="display: flex; align-items: center; margin-top: 20px; justify-content: center">
                <el-button class="solid" size="small">查询</el-button>
                <el-button class="hollow" size="small">重置</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="carType" label="类别" align="center" />
        <el-table-column label="吨位区间" align="center">
          <template #default="item"> {{ item.row.carWeightMin }} - {{ item.row.carWeightMax }} </template>
        </el-table-column>
        <el-table-column label="托运价（元）" align="center">
          <template #default="item">
            <span v-show="!show"> {{ item.row.guidePriceMin }} - {{ item.row.guidePriceMax }} </span>
          </template>
        </el-table-column>
        <el-table-column label="修改托运价（元）" align="center" v-show="show">
          <template #default="item">
            <div style="display: block; align-items: center">
              <el-input v-model="item.row.guidePriceMin" :disabled="!show" />-
              <el-input v-model="item.row.guidePriceMax" :disabled="!show" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template #default="item">
            <span v-if="!show && item.row.note !== null">{{ item.row.note }}</span>
            <span v-else-if="!show && item.row.note == null">-</span>
            <div v-else>
              <el-input
                v-model="item.row.note"
                rows="3"
                type="textarea"
                :disabled="!show"
                v-if="item.row.note !== null" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" colspan="5" align="center">
          <template #default="item">
            <el-button class="none" v-show="!show" @click="show = !show">修改定价</el-button>
            <div style="display: flex; align-items: center; justify-content: space-between" v-show="show">
              <el-button class="none" @click="submit"
                ><el-tooltip
                  class="box-item"
                  effect="dark"
                  content="每天调价一次，需要更新的估价最迟需在前一天下午5:00前提交到系统进行审核，审核通过后，通哟在选择日期零点更新"
                  placement="bottom">
                  <el-icon><Warning /></el-icon> </el-tooltip
                >提交审核</el-button
              >
              <el-button class="none" @click="show = !show" style="margin-left: 0">取消</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="mask1" v-show="mask" @click="maskBtn1"></div>
    <!-- /////////////////////////////////////////////////////////////////        提交审核弹框        ////////////////////////////////////////////////////////// -->
    <div class="audit" v-show="mask">
      <div class="title1">
        <div class="title_mes">
          <el-icon size="20" color="#fff"><Edit /></el-icon>&nbsp;是否确认提交估价审核
        </div>
        <span class="close" @click="maskBtn1">✖</span>
      </div>
      <div class="content1">
        <div class="mes_title" style="margin-top: 40px; margin-bottom: 10px; color: #7e7e7e; font-size: 12px">
          请填写调价原因
        </div>
        <el-input placeholder="请输入"></el-input>
        <!-- 按钮区域 -->
        <div class="btn_center">
          <el-button class="hollow" @click="deliverCancel">取消</el-button>
          <el-button class="solid" @click="deliverSure">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {Warning, Edit} from '@element-plus/icons-vue';
import {RequestShopValuation} from '@/api/path/index.js';
const tableData = ref([]); //表格数据
const time = ref('');
const show = ref(false); //标示是否正在修改
const mask = ref(false); //控制弹框，遮罩层的显示
const node = 1; //厂家id
onMounted(() => {
  requestShopValuation();
});
const requestShopValuation = async () => {
  const a = await RequestShopValuation(node);
  for (let i = 0; i < a.resultObj.length; i++) {
    tableData.value = tableData.value.concat(a.resultObj[i]);
  }
  console.log('获取成功', tableData.value);
  getSpanArr(tableData.value);
};
const mergeObj = ref({});
const mergeArr = ref(['carType', 'startAt']);
const getSpanArr = (data) => {
  mergeArr.value.forEach((key, index1) => {
    let count = 0; // 用来记录需要合并行的起始位置
    mergeObj.value[key] = []; // 记录每一列的合并信息
    data.forEach((item, index) => {
      // index == 0表示数据为第一行，直接 push 一个 1
      if (index === 0) {
        mergeObj.value[key].push(1);
      } else {
        // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
        if (item[key] === data[index - 1][key]) {
          console.log('測試', item.key);
          mergeObj.value[key][count] += 1;
          mergeObj.value[key].push(0);
        } else {
          // 如果当前行和上一行其值不相等
          count = index; // 记录当前位置
          mergeObj.value[key].push(1); // 重新push 一个 1
        }
      }
    });
  });
};
// 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
  if (columnIndex === 5) {
    // Assuming "操作" is the 6th column (index 5)
    // Merge the "操作" column for the first row only
    if (rowIndex === 0) {
      return [tableData.value.length, 1]; // Merge the entire "操作" column into one row
    } else {
      return [0, 0]; // Return 0 for other rows to avoid displaying content in those cells
    }
  }
  // 判断列的属性
  if (mergeArr.value.indexOf(column.property) !== -1) {
    // 判断其值是不是为0
    if (mergeObj.value[column.property][rowIndex]) {
      return [mergeObj.value[column.property][rowIndex], 1];
    } else {
      // 如果为0则为需要合并的行
      return [0, 0];
    }
  }
};
/**
 * 点击提交
 */
const submit = () => {
  mask.value = true;
};
/**
 * 遮罩层
 */
const maskBtn1 = () => {
  mask.value = !mask.value;
};
</script>

<style lang="scss" scoped>
.table {
  width: 98%;
  height: 98%;
  margin: 1% auto;
  background: #fff;
  overflow: scroll;
}

.el-table {
  margin: 20px auto;
  width: 98% !important;
}
.el-tooltip__popper {
  max-width: 400px !important; //宽度可根据自己需要进行设置
}
/*********************************************      审核弹框样式      ********************************************************/
.audit {
  width: 400px;
  height: 300px;
  background: #fff;
  position: absolute;
  top: 25%;
  left: 30%;
  z-index: 99;

  .btn_center {
    position: absolute;
    bottom: 15px;
    right: 15px;
  }
}
#mask1 {
  width: 100vw;
  height: 100vh;
  z-index: 50;
  background: rgb(116, 116, 116, 0.5);
  position: fixed;
  top: 0;
  left: 0;
}
</style>
